お手軽高機能！Closure UI【goog.ui.Bubble】

お手軽高機能！Closure UI

#JavaScript

#HTML5

#Closure

#RIA

稲毛透

2012.10.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Closure Libraryに用意されている「goog.ui.Bubble」は、指定した要素に一定時間表示される「ふきだし」状のコンポーネントです。

デモ

「Click」ボタンを押下することでBubbleコンポーネントを表示することができます。

Bubble

テキストインプットに入力がある場合は、ボタンをアンカーとして入力したテキストを伴ったBubbleが表示されます。
テキストインプットに入力が無い場合は、テキストインプットをアンカーとしてBubbleが表示されます。
Bubble以外をクリックしてもBubbleは消えません。
Bubbleは5秒経過すると自然に消えます。

デモコード

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>goog.ui.Bubble</title>
    <script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
    <script>
      goog.require('goog.events.EventType');
      goog.require('goog.ui.Bubble');
    </script>
    <link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/bubble.css">
  </head>
  <body>
    <fieldset>
      <legend>Bubble</legend>
      <input type="text" id="textinput" width="100%" />
      <input type="button" id="button" value="Click me." />
    </fieldset>
    <script type="text/javascript">
      var bubble = null;
      goog.events.listen(button, goog.events.EventType.CLICK, function(event) {
        if (bubble) {
          bubble.dispose();
          bubble = null;
        }
        bubble = new goog.ui.Bubble(textinput.value ? textinput.value : '入力してください。');
        bubble.setAutoHide(false);
        bubble.setTimeout(5000);
        bubble.render();
        bubble.attach(textinput.value ? button : textinput);
        bubble.setVisible(true);
      });
    </script>
  </body>
</html>

使い方

Bubbleコンポーネントは、おおまかに「インスタンスの生成」→「DOMツリーに追加（render）」→「表示の設定（setVisible）」の順序で使用します。

Closure Libraryのロード

<script src="http://closure-library.googlecode.com/svn/trunk/closure/goog/base.js"></script>
<script>
  goog.require('goog.events.EventType');
  goog.require('goog.ui.Bubble');
</script>

6行目: Closure Libraryのbase.jsをロードします。
（このbase.jsをロードした場合には多くのスクリプト群がロードされる為、リリースするWebアプリケーションではこの形式は取りません。通常はClosure Libraryによる依存性管理およびClosure Compilerによるスクリプトの統合が用いられます。）
7～10行目: 必要とするClosure Libraryを宣言します。ここでは主役である「goog.ui.Bubble」とイベントタイプの列挙である「goog.events.EventType」を宣言しています。

標準スタイルのロード

<link rel="stylesheet" href="http://closure-library.googlecode.com/svn/trunk/closure/goog/css/bubble.css">

11行目: Bubbleコンポーネントに標準で用意されているスタイル定義をロードします。UIコンポーネントには専用のスタイルが定義されたCSSファイルが用意されているものがあります。通常はクラス名と同様の名称（goog.ui.Bubble→bubble.css）になっているので直ぐに見つかると思います。

Bubbleを生成・表示するイベントハンドラの指定

var bubble = null;
goog.events.listen(button, goog.events.EventType.CLICK, function(event) {
  if (bubble) {
    bubble.dispose();
    bubble = null;
  }
  bubble = new goog.ui.Bubble(textinput.value ? textinput.value : '入力してください。');
  bubble.setAutoHide(false);
  bubble.setTimeout(5000);
  bubble.render();
  bubble.attach(textinput.value ? button : textinput);
  bubble.setVisible(true);
});

20行目: イベントハンドラ内から参照されるレキシカル変数です。Bubbleコンポーネントのインスタンスが格納されます。
21行目: ボタンのクリックイベントリスナへハンドラの追加を行なっています。以降22～23行目がイベントハンドラ内の処理となります。
22～25行目: 以前に生成したBubbleコンポーネントが存在する場合にコンポーネントを破棄します。disposeメソッドはBubbleコンポーネントの要素に対するイベントハンドリング等を除去し、安全にオブジェクトが破棄できる状態を提供します。（継承している「goog.Disposable」クラスのメソッドをオーバーライドしています。）
26行目: Bubbleコンポーネントのインスタンスを生成しています。第一引数にはBubble内に表示する文字列を指定します。ここではテキストインプットに入力があればその文字列、無ければ「入力してください。」という文字列を設定しています。
27行目: Bubble以外をクリックした際、自動的にBubbleを非表示とするかの設定です。ここでは「非表示としない」設定としています。
28行目: 表示されたBubbleが非表示となるまでの時間をミリ秒で設定します。ここでは5秒後に非表示となる設定としています。
29行目: Bubbleコンポーネントを構成する要素をDOMツリーに追加します。（要素がhiddenとなっている為、表示はされません。）
30行目: Bubbleコンポーネントを紐付けるアンカーとなる要素を設定します。ここではテキストインプットに入力があればボタン、無ければテキストインプットに紐付けています。
31行目: Bubbleコンポーネントを表示させます。